<template>
    <div id="app">
        <router-view></router-view>
    </div>
</template>

<script>
import { mapMutations } from "vuex";
export default {
    name: "App",
    data() {
        return {
            screenWidth: document.body.clientWidth,
        };
    },
    mounted() {
        this.screenWidth = document.body.clientWidth;
        if (this.screenWidth < 768) {
            this.updateCollapse(false);
        }
        window.onresize = () => {
            return (() => {
                this.screenWidth = document.body.clientWidth;
            })();
        };
    },
    watch: {
        screenWidth(val) {
            if (val < 768) {
                this.updateCollapse(true);
            }
        },
    },
    methods: {
        ...mapMutations(["updateCollapse"]),
    },
};
</script>

<style>
html,
body,
#app {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

/* 滚动条样式修改 */
::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 8px;
    height: 10px;
}
::-webkit-scrollbar-thumb {
    cursor: pointer;
    border-radius: 0;
    background: #c0c4cc;
    -webkit-transition: color 0.2s ease;
    transition: color 0.2s ease;
}
::-webkit-scrollbar-track {
    background: #dee6f1;
    border-radius: 0;
}
</style>
